<template lang="html">
    <div class="recommendLi">
        <div class="leftImage">
            <img v-lazy="recommendList.picUrl" alt="" />
        </div>
        <div class="rightText">
            <span class="upText">{{recommendList.Ftitle}}</span>
            <span class="downText">{{recommendList.radioid}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        recommendList:{
            type: Object,
            default: []
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    .recommendLi
        display: flex;
        width: 100%
        .leftImage
            height: 100px
            width: 30%
            // border: solid 1px red;
            img
                width: 80%;
                height: 80px;
                margin: 10%
        .rightText
            height: 100px
            width: 70%;
            // border: solid 1px blue;
            span
                display: block
                word-break: break-all
                text-overflow: ellipsis
            .upText
                margin-top: 10px
                font-size: $font-size-medium
                color: $color-text
            .downText
                margin-top: 10px
                color: $color-text-d
</style>
